<template>
    <m-page>
        <m-header slot="header"></m-header>
        <demo-content class="icon-list">
            <table>
                <tr>
                    <td>icon</td>
                    <td>type</td>
                </tr>
                <tr>
                    <td>
                        <m-icon type="checkbox_checked"></m-icon>
                    </td>
                    <td>
                        checkbox_checked
                    </td>
                </tr>
                <tr>
                    <td>
                        <m-icon type="checkbox_unchecked"></m-icon>
                    </td>
                    <td>
                        checkbox_unchecked
                    </td>
                </tr>
                <tr>
                    <td>
                        <m-icon type="checkbox_disabled"></m-icon>
                    </td>
                    <td>
                        checkbox_disabled
                    </td>
                </tr>
                <tr>
                    <td>
                        <m-icon type="order_sel"></m-icon>
                    </td>
                    <td>
                        order_sel
                    </td>
                </tr>
                <tr>
                    <td>
                        <m-icon type="order_nor"></m-icon>
                    </td>
                    <td>
                        order_nor
                    </td>
                </tr>
                <tr>
                    <td class="home_sel">
                        <m-icon type="home_sel"></m-icon>
                    </td>
                    <td>
                        home_sel
                    </td>
                </tr>
                <tr>
                    <td>
                        <m-icon type="home_nor"></m-icon>
                    </td>
                    <td>
                        home_nor
                    </td>
                </tr>
                <tr>
                    <td>
                        <m-icon type="mine1_sel"></m-icon>
                    </td>
                    <td>
                        mine1_sel
                    </td>
                </tr>
                <tr>
                    <td>
                        <m-icon type="mine1_nor"></m-icon>
                    </td>
                    <td>
                        mine1_nor
                    </td>
                </tr>
                <tr>
                    <td>
                        <m-icon type="repay_sel"></m-icon>
                    </td>
                    <td>
                        repay_sel
                    </td>
                </tr>
                <tr>
                    <td>
                        <m-icon type="repay_nor"></m-icon>
                    </td>
                    <td>
                        repay_nor
                    </td>
                </tr>
                <tr>
                    <td>
                        <m-icon type="find_sel"></m-icon>
                    </td>
                    <td>
                        find_sel
                    </td>
                </tr>
                <tr>
                    <td>
                        <m-icon type="find_nor"></m-icon>
                    </td>
                    <td>
                        find_nor
                    </td>
                </tr>
                <tr>
                    <td>
                        <m-icon type="normal"></m-icon>
                    </td>
                    <td>
                        normal
                    </td>
                </tr>
                <tr>
                    <td>
                        <m-icon type="fail"></m-icon>
                    </td>
                    <td>
                        fail
                    </td>
                </tr>
                <tr>
                    <td>
                        <m-icon type="success"></m-icon>
                    </td>
                    <td>
                        success
                    </td>
                </tr>
                <tr>
                    <td>
                        <m-icon type="minus"></m-icon>
                    </td>
                    <td>
                        minus
                    </td>
                </tr>
                <tr>
                    <td>
                        <m-icon type="plus"></m-icon>
                    </td>
                    <td>
                        plus
                    </td>
                </tr>
                <tr>
                    <td>
                        <m-icon type="bakctop"></m-icon>
                    </td>
                    <td>
                        bakctop
                    </td>
                </tr>
                <tr>
                    <td>
                        <m-icon type="collect"></m-icon>
                    </td>
                    <td>
                        collect
                    </td>
                </tr>
                <tr>
                    <td>
                        <m-icon type="market"></m-icon>
                    </td>
                    <td>
                        market
                    </td>
                </tr>
                <tr>
                    <td>
                        <m-icon type="service"></m-icon>
                    </td>
                    <td>
                        service
                    </td>
                </tr>
                <tr>
                    <td>
                        <m-icon type="share"></m-icon>
                    </td>
                    <td>
                        share
                    </td>
                </tr>
                <tr>
                    <td>
                        <m-icon type="shop"></m-icon>
                    </td>
                    <td>
                        shop
                    </td>
                </tr>
                <tr>
                    <td>
                        <m-icon type="arrow2"></m-icon>
                    </td>
                    <td>
                        arrow2
                    </td>
                </tr>
                <tr>
                    <td>
                        <m-icon type="ask"></m-icon>
                    </td>
                    <td>
                        ask
                    </td>
                </tr>
                <tr>
                    <td>
                        <m-icon type="attetion"></m-icon>
                    </td>
                    <td>
                        attetion
                    </td>
                </tr>
                <tr>
                    <td>
                        <m-icon type="back"></m-icon>
                    </td>
                    <td>
                        back
                    </td>
                </tr>
                <tr>
                    <td>
                        <m-icon type="back1"></m-icon>
                    </td>
                    <td>
                        back1
                    </td>
                </tr>
                <tr>
                    <td>
                        <m-icon type="check"></m-icon>
                    </td>
                    <td>
                        check
                    </td>
                </tr>
                <tr>
                    <td>
                        <m-icon type="check1"></m-icon>
                    </td>
                    <td>
                        check1
                    </td>
                </tr>
                <tr>
                    <td>
                        <m-icon type="close"></m-icon>
                    </td>
                    <td>
                        close
                    </td>
                </tr>
                <tr>
                    <td>
                        <m-icon type="close1"></m-icon>
                    </td>
                    <td>
                        close1
                    </td>
                </tr>
                <tr>
                    <td>
                        <m-icon type="delete"></m-icon>
                    </td>
                    <td>
                        delete
                    </td>
                </tr>
                <tr>
                    <td>
                        <m-icon type="message"></m-icon>
                    </td>
                    <td>
                        message
                    </td>
                </tr>
                <tr>
                    <td>
                        <m-icon type="more"></m-icon>
                    </td>
                    <td>
                        more
                    </td>
                </tr>
                <tr>
                    <td>
                        <m-icon type="scan"></m-icon>
                    </td>
                    <td>
                        scan
                    </td>
                </tr>
                <tr>
                    <td>
                        <m-icon type="search"></m-icon>
                    </td>
                    <td>
                        search
                    </td>
                </tr>
                <tr>
                    <td>
                        <m-icon type="shop_nor"></m-icon>
                    </td>
                    <td>
                        shop_nor
                    </td>
                </tr>
                <tr>
                    <td>
                        <m-icon type="shop_sel"></m-icon>
                    </td>
                    <td>
                        shop_sel
                    </td>
                </tr>
                <tr>
                    <td>
                        <m-icon type="topic_nor"></m-icon>
                    </td>
                    <td>
                        topic_nor
                    </td>
                </tr>
                <tr>
                    <td>
                        <m-icon type="topic_sel"></m-icon>
                    </td>
                    <td>
                        topic_sel
                    </td>
                </tr>
                <tr>
                    <td>
                        <m-icon type="school_nor"></m-icon>
                    </td>
                    <td>
                        school_nor
                    </td>
                </tr>
                <tr>
                    <td>
                        <m-icon type="school_sel"></m-icon>
                    </td>
                    <td>
                        school_sel
                    </td>
                </tr>
                <tr>
                    <td>
                        <m-icon type="money_nor"></m-icon>
                    </td>
                    <td>
                        money_nor
                    </td>
                </tr>
                <tr>
                    <td>
                        <m-icon type="money_sel"></m-icon>
                    </td>
                    <td>
                        money_sel
                    </td>
                </tr>
                <tr>
                    <td>
                        <m-icon type="mine_nor"></m-icon>
                    </td>
                    <td>
                        mine_nor
                    </td>
                </tr>
                <tr>
                    <td>
                        <m-icon type="mine_sel"></m-icon>
                    </td>
                    <td>
                        mine_sel
                    </td>
                </tr>
            </table>
        </demo-content>
    </m-page>
</template>
<script>
export default {
    name: 'demo-icon',
    data() {
        return {}
    }
}
</script>
<style lang="scss"
    scoped>
.icon-list table {
    border-spacing: 0;
    border-collapse: collapse;
    width: 100%;
    overflow: auto;
    font-size: 14px;
}

.icon-list table th {
    font-weight: 600
}

.icon-list table td,
.icon-list table th {
    padding: 6px 13px;
    border: 1px solid #dfe2e5
}

.icon-list table tr {
    background-color: #fff;
    border-top: 1px solid #c6cbd1
}

.home_sel /deep/ path {
    fill: #000;
}

// .icon-list table tr:nth-child(2n) {
//     background-color: #f6f8fa
// }
</style>
